<template>
  <div v-if="!!explanation.content || (countdown && (explanation.isRedirectTimeOut || explanation.countdownOver))" :style="{backgroundColor: backgroundColor}" class="explanation-container">
    <div v-if="!!explanation.content" ref="explanationRef" :style="styConfig" :class="{shadow:isExpand && !open && isOverHeight}" class="explanation" v-html="newContent">
      {{ newContent }}
      <slot/>
    </div>
    <div v-if="explanation.isRedirectTimeOut && !explanation.countdownOver" :style="styConfig" class="explanation">
      审批倒计时：<CountDown :count="explanation.countdown" :display-zero="true" @refreshPage="refreshPage"/>，{{ explanation.transferRemark }}
    </div>
    <div v-if="(explanation.isRedirectTimeOut || explanation.transferFlag) && explanation.countdownOver" :style="styConfig" class="explanation">
      审批已超时{{ explanation.transferRemark ? `，${explanation.transferRemark}` : '' }}
    </div>
    <div v-if="isExpand && isOverHeight" class="expand-container">
      <div class="label" @click="switchOpen">{{ open?'收起':'展开' }}<i :class="`${open ? 'el-icon-arrow-up':'el-icon-arrow-down'}`" class="ml5"/></div>
    </div>
  </div>
</template>
<script>
import CountDown from '@/components/Common/countdown';
import { formatTag } from '@/filters/dept';
import { transferOver } from '@/api/legal';

export default {
  components: { CountDown },
  props: {
    explanation: {
      type: Object,
      default: () => { return {}; }
    },
    isExpand: { // 是否开启超出高度时开启展开收起
      type: Boolean,
      default: false
    },
    countdown: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      open: false,
      contentHeight: 0
    };
  },
  computed: {
    newContent() {
      const reg = new RegExp('\\n', 'g');
      return this.explanation.content.replace(reg, '<br>');
    },
    styConfig() {
      const styConfig = this.explanation.styConfig ? JSON.parse(this.explanation.styConfig) : {};
      const obj = {
        backgroundColor: styConfig.bgColor,
        color: styConfig.color || '#FF003C',
        padding: styConfig.padding
      };
      if (this.isExpand && !this.open) {
        obj.maxHeight = '90px';
        obj.overflow = 'hidden';
      }
      return obj;
    },
    backgroundColor() {
      const styConfig = this.explanation.styConfig ? JSON.parse(this.explanation.styConfig) : {};
      return styConfig.bgColor;
    },
    isOverHeight() {
      return this.contentHeight >= 90;
    }
  },
  watch: {
    'explanation.content': {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.contentHeight = this.$refs.explanationRef.offsetHeight;
          });
        }
      },
      immediate: true
    }
  },
  methods: {
    formatTag,
    switchOpen() {
      this.open = !this.open;
    },
    refreshPage() {
      if (!this.explanation.transferFlag) {
        // 发起请求直至transferFlag为true，后台流程处理完毕，则刷新页面
        const requestTimer = setInterval(() => {
          if (!this.explanation.transferNodeId) {
            clearInterval(cancelTimer);
            clearInterval(requestTimer);
            location.reload();
            return;
          }
          transferOver(this.explanation.transferNodeId).then(res => {
            if (res.data) {
              clearInterval(cancelTimer);
              clearInterval(requestTimer);
              location.reload();
            }
          }).catch(err => {
            console.log(err);
          });
        }, 3000);
        // 过一段时间不再发后台流程处理完毕的请求
        const cancelTimer = setTimeout(() => {
          clearInterval(requestTimer);
        }, 23000);
      }
    }
  }
};
</script>
<style lang="scss" scoped>

.explanation-container {
  position: relative;
  margin-bottom: 16px;
  .explanation {
    // white-space: pre-wrap;
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #141c3d;
    line-height: 18px;
    padding: 8px 8px;
    background: #f9f9f9;
    position: relative;
    &.shadow {
      &::after {
        content: '';
        width: 100%;
        left: 0;
        height: 30px;
        position: absolute;
        background-image: linear-gradient(-180deg,rgba(255,255,255,0),#fff);
        bottom: 0;
      }
    }
  }
}
.expand-container {
  // position: absolute;
  width: 100%;
  .label {
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
  }
}
</style>
